VChart 1.13.0
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=211-How to configure it to ignore part of the display content——VisActor/VChart FAQ documents!!!###!!!

The x-axis data is too dense. How to configure it to ignore part of the display content?

Question Description

I am drawing a line chart with a large amount of data. The data contains many dimensions. If it is drawn through d3, axisBottom will omit part of the content and only display a few dimension items. I hope to be able to display a large number of tags relatively densely without the tags being blocked. Is there any tool that can achieve this ?

The demo line chart result of D3 is as follows:d3

Solution

VChart allows developers to configure different axis label display strategies. By default, VChart will sample axis labels to display appropriate label content. Developers can configure axes.sampling to false to turn off this sampling algorithm, and apply the label occlusion algorithm through axes.label.autoRotate to display more labels while avoiding occlusion. Developers can also turn on the automatic rotation of labels through axes.label.autoHide to display more label content.

In addition, if developers are still not satisfied with these built-in label display strategies, they can customize the label display rules through axes.label.dataFilter:

Quote